<template>
  <div class="markdown-container">
    <div class="title">
      <label for="title"
        >文章题目:(一定要写明公司的名称与岗位，以便于读者搜索
        例如：腾讯前端一面)</label
      >
      <input type="text" id="title" v-model="title" />
      <br />
      <label for="title">文章简介</label>
      <input type="text" id="preView" v-model="preView" />
      <el-button class="editor-btn" type="primary" @click="submit"
        >发布文章</el-button
      >
    </div>
    <div class="container">
      <mavon-editor
        v-model="content"
        ref="md"
        @imgAdd="$imgAdd"
        @change="change"
        style="min-height: 700px"
      />
    </div>
    <my-dialog :ifshow="ifshow" @cancel="cancel" @define="define"></my-dialog>
  </div>
</template>
<script>
//该组件中注释掉的代码为局部注册的方式。
// import { mavonEditor } from "mavon-editor";
// import "mavon-editor/dist/css/index.css";
// import axios from "axios";
import { sendArticle } from '@/api/api'
import myDialog from './componment/Dialog.vue'
export default {
  components: {
    myDialog
  },
  data: function () {
    return {
      content: '',
      html: '',
      configs: {},
      title: '',
      ifshow: false,
      preView: ''
    }
  },
  // components: {
  //   mavonEditor
  // },
  methods: {
    // 将图片上传到服务器，返回地址替换到md中
    $imgAdd(pos, $file) {
      var formdata = new FormData()
      formdata.append('file', $file)
      //将下面上传接口替换为你自己的服务器接口
      // axios({
      //   url: "/common/upload",
      //   method: "post",
      //   data: formdata,
      //   headers: { "Content-Type": "multipart/form-data" }
      // }).then(url => {
      //   this.$refs.md.$img2Url(pos, url);
      // });
    },
    change(value, render) {
      // render 为 markdown 解析后的结果
      this.html = render
    },
    cancel() {
      this.ifshow = false
    },
    define(type) {
      this.ifshow = false
      sendArticle({
        articleContent: this.html,
        articleTitle: this.title,
        userId: this.$store.getters.getUserInfo.id,
        articleType: type,
        articlePreView: this.preView
      }).then((res) => {
        this.$router.push('interviewArticle')
      })
    },
    submit() {
      if (!this.title) return this.$message.error('请输入题目')
      if (!this.html) return this.$message.error('请输入内容')
      this.ifshow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.markdown-container {
  .title {
    height: 66px;
    background-color: #fff;
    input {
    }
    .editor-btn {
      margin-left: 20px;
    }
  }
  .container {
    margin-top: 6px;
  }
}
</style>

